<template>
  <div class="activity" :style="{ height: appHeight + 'px' }" v-if="state.detail">
    <div>
      <ImgT class="imgs" v-if="state.detail" :src="state.detail" alt="" />
    </div>

    <nut-button class="submit" @click="submit">{{ t("share") }}</nut-button>
    <!-- 分享弹窗 -->
    <shareModal v-model:visible="visible"></shareModal>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue";
import shareModal from "@/views/me/components/shareModal.vue";
import { Page } from "@/store/page";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { useRoute } from "vue-router";
import { User } from "@/store/user";
import { useI18n } from "vue-i18n";
const { adminI18n, lang } = storeToRefs(Page(pinia));
const { appHeight } = storeToRefs(User(pinia));
const { t } = useI18n();
const route = useRoute();
const visible = ref(false);
const state: any = reactive({
  detail: null,
});

const submit = () => {
  visible.value = true;
};

onMounted(async () => {
  if (route.query.activty_id) {
    const content = `activities_mobile_content_${route.query.activty_id}`;
    state.detail = adminI18n.value[lang.value][content];
  }
  if (route.query.pic_content) {
    state.detail = route.query.pic_content;
  }
  // document.documentElement.style.overflow = "hidden";
  // document.body.style.overflow = "hidden";
});
onUnmounted(() => {
  // document.documentElement.style.overflow = "visible";
  // document.body.style.overflow = "visible";
});
</script>

<style lang="scss" scoped>
.activity {
  height: 100%;
  padding: 10px 10px 0px;
  overflow: hidden;

  > div {
    // height: calc(100vh);
    height: 100%;
    padding-bottom: 100px;
    overflow-y: auto;
  }

  .imgs {
    width: 100%;
    padding-bottom: 60px;
  }
}

.submit {
  width: 95%;
  height: 44px;
  border-radius: 8px;
  position: fixed;
  bottom: 2px;
  left: 2.5%;
}
</style>
